ひとりNavigation API Advent Calendar 12日目

https://gyazo.com/8a5234fcf9420ee2a23a7ddc3ee791e3

これはひとりNavigation API Advent Calendarの12日目です。

ひとりNavigation API Advent Calendar 11日目に引き続きNavigation APIの仕様についてをみていきます

NavigationEventのintercept()から

event.intercept({ precommitHandler, handler, focusReset, scroll })

インターセプトは妨害したり遮断するという意味

precommitHandler

ナビゲーションがcommitされる直前に発生すべき動作を定義するコールバック関数

引数としてNavigationPrecommitControllerオブジェクトを受け取り、Promiseを返す

code:js

async precommitHandler(controller) {

controller.redirect("/signin/", {

state: "signin-redirect",

history: "push",

});

}

この関数は currentEntry プロパティが更新される前に実行される

handler

ナビゲーションがcommitされた後の処理動作を定義するコールバック関数です

この関数は currentEntry プロパティが更新された後に実行されます

新しい URL が表示された状態でDOM更新などを行う

focusReset

遷移後のフォーカス挙動を制御

デフォルトでは、このメソッドを使用すると、いずれかのハンドラーが返したプロミスが解決された時点でフォーカスがリセットされる

フォーカスは、autofocus属性が設定されている最初の要素、またはその属性が存在しない場合はbody要素にリセットされます。この動作を回避するには、focusResetオプションを"manual"に設定

scroll

遷移後のスクロール挙動を制御

デフォルトでは、このメソッドを使用すると、ハンドラの返すPromiseが解決されるまで、ブラウザのスクロール復元ロジック（"traverse"または"reload"ナビゲーションの場合）またはスクロールリセット/フラグメントへのスクロールロジック（"push"または"replace"ナビゲーションの場合）が遅延される

scrollオプションを"manual"に設定することでブラウザ主導のスクロール動作を完全に無効化できる

あるいは、Promiseが解決する前にscroll()を呼び出すことで、この動作を早期にトリガーすることも可能